<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js写qq多彩字体的生成</title>
    <style>
        body,p{ margin: 0px;padding: 0px;}
        .warp{ margin:30px auto; width: 800px; height: 500px;}
        #p1,#p2{ width: 800px; height: 100px; border: 1px solid #333;margin-bottom: 10px;}
        #p2{ margin-top: 10px;}
        #btn{ width: 120px; height: 30px; border: none;}
        .text1{ color: crimson; font-size: 14px; font-weight: 400;}
        .text2{ color: royalblue; font-size: 14px; font-weight: 500;}
        .text3{ color: yellowgreen; font-size: 14px; font-weight: 600;}
        .text4{ color: gold; font-size: 14px; font-weight: 500;}
        .text5{ color: salmon; font-size: 14px; font-weight: 400;}
    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var p1=document.getElementById("p1");
            var p2=document.getElementById("p2");
            btn.onclick=function(){
                if(p2.value==""){
                    alert("说点什么吧！")
                }else{
                    var arr=p2.value.split("");
                    var str="";
                    var classArr=["text1","text2","text3","text4","text5"];
                    var num=0;
                    for(var i=0;i<arr.length;i++){
                        if(num==classArr.length){
                            num=0;
                        }
                        str+='<span class="'+classArr[num]+'">'+arr[i]+'</span>';
                        num++;
                    }
                    p1.innerHTML=str;
                    p2.value="";
                }
            }
        }
    </script>
</head>
<body>
<div class="warp">
    <p id="p1">

    </p>
    <select>
        <option>五彩字体</option>
        <option>气球字体</option>
    </select>
    <textarea id="p2"></textarea>
    <button id="btn">确定</button>
</div>
</body>
</html>